<script setup lang="ts">
import { onMounted } from 'vue';
import headerAisde from '../components/review/headerAisde.vue';
import { useCollectionReviewStore } from '../store/collectionReview';
import collection from '../api/collection';
import reviewCollectionList from '../components/review/reviewCollectionList.vue';
import drawer from '../components/drawer.vue';
const collectionReviewStore = useCollectionReviewStore();
onMounted(async() => {
    await collection.getColllectionReviewStats().then((res) => {
        collectionReviewStore.collectionStats = res.data.data;
    });
});
</script>
<template>
    <div class="collectionReview">
        <el-card style="width: 100%">
            <template #header>
                <div class="card-header">
                    <h2>待审核藏品({{ collectionReviewStore.collectionStats.totalReview }})</h2>
                    <span class="rightTopSpan">今日新增<span style="color: red;">{{ collectionReviewStore.collectionStats.todayNewReview  }}</span></span>
                </div>
            </template>
            <headerAisde />
            <reviewCollectionList />
            <drawer />
        </el-card>
    </div>
</template>
<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
}
.rightTopSpan {
    float: right;
}
.collectionReview {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>